<template>
  <div class="ChatSidebar">
    <div class="new-chat-container">
      <div class="new-chat-button" @click="$emit('newChat')">
        <FormOutlined :style="{ fontSize: '14px' }" />
        <span class="button-text">新对话</span>
        <span class="shortcut">Ctrl+K</span>
      </div>
    </div>
    <!-- <div class="p-4 button">
      <Button type="primary" preIcon="ant-design:plus-outlined"> New Chat </Button>
      <a-button type="primary" preIcon="ant-design:search-outlined" class="icon" />
    </div> -->

    <div class="px-3 py-2 ClearAll">
      <div class="conversation">你的对话</div>
      <div class="addition">
        <span class="text-xs">清除所有对话</span>
      </div>
    </div>

    <div class="flex-1" style="padding: 0.7rem 0.2rem">
      <div v-for="conv in props.conversations" :key="conv.id">
        <SidebarItem :conversation="conv" @select="handleSelectConversation" />
      </div>
    </div>

    <div class="p-4 border-t border-gray-200">
      <div class="flex items-center gap-3">
        <Avatar src="https://picsum.photos/id/1005/200" alt="User" size="sm" />
        <span class="text-sm font-medium">Andrew Neilson</span>
      </div>
      <div class="mt-4">
        <Button variant="ghost" size="sm" class="w-full justify-start text-gray-600">
          <SettingsIcon class="w-4 h-4 mr-2" />
          Settings
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Conversation } from '../types/chat';
  import SidebarItem from './SidebarItem.vue';
  import Button from '../ui/Button.vue';
  import Avatar from '../ui/Avatar.vue';
  import { PlusIcon, SettingsIcon } from 'lucide-vue-next';
  import { PlusOutlined, DownloadOutlined, FormOutlined } from '@ant-design/icons-vue';
  const props = defineProps<{
    conversations: Conversation[];
  }>();

  const emit = defineEmits<{
    (e: 'selectConversation', id: string): void;
    (e: 'newChat'): void;
  }>();

  const handleSelectConversation = (id: string) => {
    emit('selectConversation', id);
  };
</script>

<style lang="scss" scoped>
  .ChatSidebar {
    width: 90%;
    height: 90%;
    // 新对话按钮样式
    .new-chat-container {
      padding: 0 0.5rem 0.5rem;
    }
    .new-chat-button {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0.6rem 1rem;
      background-color: #0057ff0f;
      border: 0.5px solid rgba(0, 102, 255, 0.15);
      color: #0057ff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.2s;
      &:hover {
        background-color: #dae4f7;
      }
    }
    .plus-icon {
      font-size: 16px;
      margin-right: 8px;
      font-weight: bold;
    }

    .button-text {
      flex: 1; // 让文本占据中间大部分空间
      font-weight: 600;
      font-size: 15px;
      margin-left: 5px;
    }

    .shortcut {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      background-color: rgba(0, 0, 0, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
    }
    // .button {
    //   display: flex;
    //   align-items: center;
    //   .icon {
    //     height: 35px;
    //     background-color: #5662f6;
    //     width: 15%;
    //   }
    // }
    .ClearAll {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1.5px solid #0000001f;
      border-bottom: 1.5px solid #0000001f;
      padding: 0.5rem 1rem;
      .conversation {
        font-size: 13px;
      }
      .addition {
        color: #5662f6;
      }
    }
  }
</style>
